<template>
	<view>
		<view class="wantTab-group">
			<view :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index"
				class="tab_item" @click="clickCtTab(index)">
				<text v-text="item.title"></text>
			</view>
		</view>
		<!-- 内容 -->
		<view class="xiala">
			<!-- 内容信息 -->
			<view v-if="tabCur===0">
				<view class="yuyue_content">
					<view class="yueyue_wrapper">
						<text>预约店铺</text>
						<text class="font_padding">{{reservationInfo.store.storeName}}</text>
					</view>
					<view class="yueyue_wrapper">
						<text>预约状态</text>
						<text style="color: #FF0000;"
							class="font_padding">{{reservationInfo.storeReservation.state==1? '正常':'关闭'}}</text>
					</view>
					<view class="yueyue_wrapper">
						<text>营业时间</text>
						<text style="color: #FF0000;"
							class="font_padding">{{reservationInfo.storeReservation.startTime}}-{{reservationInfo.storeReservation.endTime}}</text>
					</view>
					<view class="yueyue_wrapper">
						<text>预约交易日</text>
						<text style="color: #FF0000;"
							class="font_padding">{{reservationInfo.storeReservation.transaction}}</text>
					</view>
					<view class="yueyue_wrapper">
						<text>当前交易时间</text>
						<text class="font_padding">{{reservationInfo.storeReservation.createTime}}</text>
					</view>
				</view>
				<view class="yuyue_content">
					<view class="yueyue_wrapper">
						<text>请选预约价格范围</text>
					</view>
					<view v-for="(item,index) in reservationInfo.reservations" :key="item.id" class="price_item"
						@click="pricechange(index)" :class="{'priceActive':priceIndex==index}">
						<text>预约{{item.startPrice}}~{{item.endPrice}}</text>
					</view>

				</view>
				<view class="yuyue_btnclick">
					<button @click="goto">确认预约</button>
				</view>
			</view>
			<view v-if="tabCur===1 && reservations">
				<template v-if="reservations.length>0">
					<view class="cur_content">
						<view class="cur_list" v-for="(item,index) in reservations" :key="item.id">
							<view class="cur_item">
								<view class="cur_head">配单状态</view>
							</view>
							<view class="cur_top">
								<text>预约店铺</text>
								<text class="red_font">{{item.storeName}}</text>
							</view>
							<view class="cur_top">
								<text>预约价格</text>
								<text
									class="red_font">{{item.storeReservationStartPrice}}~{{item.storeReservationEndPrice}}</text>
							</view>
							<view class="cur_top">
								<text>申请时间</text>
								<text>{{item.createTime}}</text>
							</view>
							<view class="cur_top">
								<text>预约交易日</text>
								<text>{{item.transactionDate}}</text>
							</view>
						</view>
					</view>
				</template>
				<Nodata v-else></Nodata>
			</view>
			<view v-if="tabCur===2">
				<view class="qiehuan">
					<view class="qiehuan_left">
						<view><text>切换状态</text></view>
						<view class="qh_yuyue">
							<text @click="yuyuechange(0)" class="qh_yuyuebtn"
								:class="{'qh_yuyuebtnActive':yuyueIndex==0}">未预约</text>
							<text @click="yuyuechange(1)" class="qh_yuyuebtn"
								:class="{'qh_yuyuebtnActive':yuyueIndex==1}">已预约</text>
						</view>
					</view>
					<view class="qiehuan_right">
						<view class="daochu">导出Excel</view>
					</view>
				</view>
				<template v-if="userReservations.length>0">
					<YuYue v-for="(item,index) in userReservations" :reservation="item" :key="item.invitationCode">
					</YuYue>
				</template>
				<view v-else>
					<Nodata></Nodata>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import YuYue from '@/components/YuYue.vue'
	import Nodata from '@/components/Nodata.vue'
	import {
		getReservationInfo,
		reservation,
		getReservationList,
		subReservationList
	} from '@/request/api/want.js'
	export default {
		components: {
			YuYue,
			Nodata
		},
		data() {
			return {
				// 下拉固定
				yuanH: uni.upx2px(200),
				isF: false,
				// 滑动tab
				tabCur: 0,
				tabList: [{
					title: '我要预约',
				}, {
					title: '我的预约',
				}, {
					title: '查看下级预约',
				}],
				reservationInfo: {
					store: {
						id: '',
						storeNumber: '',
						prefixNumber: '',
						storeName: '',
						userId: '',
						createTime: ''
					},
					storeReservation: {
						id: '',
						storeId: '',
						state: '', //预约状态
						startTime: '',
						endTime: '',
						transaction: '',
						createTime: ''
					},
					reservations: [{
						id: '',
						startPrice: '',
						endPrice: '',
						storeId: '',
						createTime: ''
					}]
				},
				reservations: [{
					storeName: '',
					storeReservationStartPrice: '',
					storeReservationEndPrice: '',
					createTime: '',
					transactionDate: '',
					userId: '',
					phone: '',
					userName: '',
					invitationCode: ''
				}],
				yuyueIndex: 0,
				priceIndex: 0,
				userReservations: [{
					storeName: '',
					userName: '',
					phone: '',
					invitationCode: ''
				}]
			}
		},
		onPageScroll(e) {
			//#ifdef H5
			this.isF = true
			// #endif
			// #ifndef H5
			if (this.yuanH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
			// #endif
		},
		methods: {
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				if (this.tabCur == 1) {
					this.getMyReservations()
				}
				if (this.tabCur == 2) {
					this.yuyuechange(0)
				}
			},
			yuyuechange(yuyueIndex) {
				this.yuyueIndex = yuyueIndex
				if (this.yuyueIndex == 0) {
					this.getsubReservationList(0)
				} else {
					this.getsubReservationList(1)
				}
			},
			pricechange(priceIndex) {
				this.priceIndex = priceIndex
			},
			async clickWantList() {
				const res = await getReservationInfo()
				this.reservationInfo = res.data
			},
			async goto() {
				const id = this.reservationInfo.reservations[this.priceIndex].id
				const res = await reservation(id)
				if (res.code == 0) {
					uni.showToast({
						title: '预约成功',
						duration: 1000
					});
				}
			},
			async getMyReservations() {
				const res = await getReservationList()
				console.log(res)
				this.reservations = res.data
			},
			async getsubReservationList(state) {
				const res = await subReservationList(state)
				this.userReservations = res.data
			}

		},
		onLoad() {
			this.clickWantList()
		}
	};
</script>

<style lang='scss' scoped>
	.wantTab-group {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow: hidden;
		align-items: center;
		text-align: center;
		background-color: white;
		padding: 10px 0;
	}

	.wantTab-group .tab_item {
		flex: 1;
		flex-grow: 1;
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.wantTab-group .tab_item text {
		display: flex;
		flex: 1;
		text-align: center;
		justify-content: center;
		padding-bottom: 10px;
		padding-top: 10px;
		border-bottom: 2px solid transparent;
		margin-left: 10px;
		margin-right: 10px;
	}

	.wantTab-group .tab_item.ct_active text {
		color: #2866f9;
		font-weight: bold;
		border-bottom: 3px solid #007AFF;
	}

	/*内容*/
	.xiala {
		background-color: #f7f7f7;
	}

	/*第一部分：我要预约*/
	.yuyue_content {
		margin-top: 10px;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.yuyue_content .yueyue_wrapper {
		margin: 0 14px;
		height: 48px;
		border-bottom: 1px solid #eee;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.yuyue_content .yueyue_wrapper text {
		color: #333;
		font-weight: 400;
		font-size: 15px;
		line-height: 22px;
	}

	.yuyue_content .yueyue_wrapper .font_padding {
		padding-left: 20px;
	}

	.yuyue_btnclick button {
		margin: 14px 14px;
		margin-top: 9px;
		background-color: #2866f9;
		color: #fff;
		font-size: 20px;
		border-radius: 8px;
		font-weight: 400;
	}

	.yueyue_redfont {
		color: red;
	}

	.price_item {
		margin: 0 14px;
		margin-bottom: 9px;
		padding: 14px;
		border: 1px solid #eee;
		border-radius: 5px;
		color: #333;
		font-weight: 400;
		font-size: 15px;
		line-height: 22px;
		display: flex;
		justify-content: space-between;
	}

	.priceActive {
		background: #2866f9;
		color: #fff;
		position: relative;
	}

	.priceActive::after {
		content: '';
		background-image: url('@/static/duigou.png');
		background-size: cover;
		width: 22px;
		height: 22px;
		position: absolute;
		right: 20px;

	}

	/*第二部分：我的预约*/
	.cur_content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.cur_list {
		margin-top: 12px;
		background-color: #fff;
	}

	.cur_item .cur_head {
		display: flex;
		padding: 9px 18px;
		border-bottom: 1px solid #eee;
		flex-direction: row;
	}

	.cur_list .cur_top {
		padding: 9px 18px;
	}

	.cur_list .cur_top text:last-child,
	.cur_head text:last-child {
		margin-left: 25px;
	}

	.red_font {
		color: red;
	}

	/*第三部分：查看下级预约*/
	.qiehuan {
		padding: 9px;
		border-top: 1px solid #ddd;
		background: #fff;
		display: flex;
		justify-content: space-between;
	}

	.qiehuan_left {
		display: flex;
		flex-direction: row;
	}

	.qh_yuyuebtn {
		margin-left: 14px;
		padding: 1px 5px;
		border-radius: 5px;
		background: #ddd;
		color: #333;

	}

	.qh_yuyuebtnActive {
		background-color: #2866f9;
		color: #fff;
	}

	.daochu {
		margin-left: 15px;
		border-radius: 5px;
		padding: 2px 5px;
		background: #4ba149;
		color: #fff;
	}

	.yi_yuyueNodata {
		padding-top: 40px;
	}
</style>